@import "variables.less";

.mobile-page {
    width           : 100%;
    height          : 100%;
    position        : absolute;
    overflow-x      : hidden;
    overflow-y      : hidden;
    background-color: #fff;
    box-shadow      : -10px 0px 10px 0px rgba(0, 0, 0, 0.2);

    footer {
        background-color: @body-bg;
        width           : 100%;
        position        : absolute;
        bottom          : 0;
        z-index         : 100;
    }

    header {
        background-color: @body-bg;
        width           : 100%;
        position        : absolute;
        top             : 0;
        z-index         : 100;
        @nav-padding-top: 8px;

        nav {
            height  : @navbar-height;
            width   : 100%;
            position: absolute;
            z-index : 200;

            .right-button,
            .rightButton {
                border-radius: 15px;
                font-size    : 18px;
                float        : right;
                margin       : 12px 10px 0px 0px;
                height       : 30px;
                width        : 30px;
                border       : none;
                color        : inherit;
                background   : none;
            }

            .left-button,
            .leftButton {
                border-radius: 15px;
                font-size    : 18px;
                float        : left;
                margin       : 12px 0px 0px 10px;
                height       : 30px;
                width        : 30px;
                border       : none;
                color        : inherit;
                background   : none;
            }

            h4 {
                color     : @body-bg;
                font-size : 18px;
                height    : @nav-height;
                padding   : @nav-padding-top 0 0 0;
                text-align: center;
            }
        }
    }

    section {
        position                  : absolute;
        width                     : 100%;
        height                    : 100%;
        overflow-y                : auto;
        overflow-x                : hidden;
        -webkit-user-drag         : none;
        // -webkit-user-select    : none;
        -webkit-overflow-scrolling: touch;

        li {
            list-style: none;
        }

        .loading {
            width           : 100%;
            font-size       : 120px;
            text-align      : center;
            padding-top     : 80px;
            color           : #bbb;
            background-color: @bg-color;
        }
    }

    .norecords {
        text-align : center;
        padding-top: @norecords-padding-top;
        width      : 100%;

        .icon {
            position        : relative;
            width           : 160px;
            height          : 160px;
            left            : 50%;
            margin-left     : -80px;
            border-radius   : 50%;
            background-color: #eeeeee;

            i {
                position : relative;
                top      : 30px;
                font-size: 120px;
                display  : block;
                color    : white;
            }

            .icon-rss {
                -moz-transform   : rotate(-45deg);
                -ms-transform    : rotate(-45deg);
                -o-transform     : rotate(-45deg);
                -webkit-transform: rotate(-45deg);
                transform        : rotate(-45deg);
                position         : relative;
                top              : 14px;
                left             : 3px;
            }
        }

        .text {
            padding-top: 10px;
            font-size  : 16px;
        }

        button {
            margin-top: 10px;
        }
    }

    .badge {
        position: absolute;
    }
}

body {
    margin : 0;
    padding: 0;
}

article.topbar-padding {
    @padding-top: 50px;
    padding-top : @padding-top;

    section {
        height: calc(~'100% - @{padding-top}');
    }
}